<template>
    <div class="page-form page-act-add">
      <Form  ref="formValidate" :model="formItem" :rules="ruleValidate" style="width: 500px" :label-width="120">
          <FormItem prop="id" label="员工ID：">
              <Input v-model="formItem.id" placeholder="请输入员工ID"></Input>
          </FormItem>
          <FormItem label="节目编号：">
            <CheckboxGroup @on-change="ChooseAct" v-model="chooseList">
              <Checkbox v-for="(item,index) in actList" v-bind:key="index" v-bind:label="item.value">{{item.text}}</Checkbox>
            </CheckboxGroup>              
          </FormItem>         
          <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </FormItem>
      </Form>
    </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      pageIndex: 0,
      pageSize: 10,
      chooseList: [], //选中的值
      actList: [], // 初始化的界面列表
      formItem: {
        id: ""
      },
      ruleValidate: {
        id: [
          {
            required: true,
            message: "请输入需要测试的员工ID~",
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    ChooseAct(val) {
      console.log(val);
    },
    init() {
      var self = this;
      var req = this.Axios.get(this.Interface.actList, {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      });
      req.then(res => {
        var data = res.data;
        if (data.success) {
          var result = data.data.rows;
          var actlist = [];
          result.forEach(item => {
            var obj = {};
            obj.value = item.id;
            obj.text = item.title;
            actlist.push(obj);
          });
          this.actList = actlist;
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    handleSubmit(name) {
      var self = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          var data = {};
          data.uid = self.formItem.id;
          data.aid = self.chooseList;

          // 定义请求
          var req = self.Axios.post(self.Interface.voteAdd, data);

          // 处理请求结果
          req.then(res => {
            var data = res.data;
            if (data.success) {
              this.$Message.success("投票成功");

              setTimeout(function() {
                self.$router.push({
                  path: "/vote/list"
                });
              }, 1500);
              
            } else {
              this.$Message.error(data.msg);
            }
          });
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
<style scoped lang="less">
.page-form {
  overflow: auto;
  box-sizing: border-box;
  padding: 15px 0 0 0;
}
</style>